 <!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>APP</title>
		<link href="css/weui.min.css" rel="stylesheet" />
		<link href="css/jquery-weui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="fonts/iconfont.css" rel="stylesheet" />
		<link href="css/flex.css" rel="stylesheet" />
		<script src="js/immersed.js"></script>
	</head>

	<style>
		.main-body {
			background-color: #f4f4f4;
		}
		
		.weui-cell {
			font-size: 15px;
		}
		
		.weui-label {
			width: 180px;
			color: #999
		}
	</style>

	<body>

		<div id="app">

			<div class="xiaoyi-header header-red" id="header">
				<div class="xiaoyi-header-left"><i class="iconfont icon-back " onclick="wsClose()"></i></div>
				<div class="xiaoyi-header-title">我的合伙人</div>
			</div>

			<div class="main-body" id="main">

				<div class="weui-search-bar" id="searchBar">
					<form id="form" class="weui-search-bar__form" action="#">
						<div class="weui-search-bar__box">
							<i class="weui-icon-search"></i>
							<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
							<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
						</div>
						<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
					          <i class="weui-icon-search"></i>
					          <span>搜索</span>
					        </label>
					</form>
					<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
				</div>

				<div class="weui-panel weui-panel_access">
					<div class="weui-panel__bd">

						<template v-for="(vo,index) in this.items">
							<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" @click="openUser(vo.id)">
								<div class="weui-media-box__hd">
									<img class="weui-media-box__thumb" :src="vo.icon_img+'@!200x200'" v-if='vo.icon'>
									<img class="weui-media-box__thumb" src="images/nopic.gif" v-else>
								</div>
								<div class="weui-media-box__bd">
									<h4 class="weui-media-box__title">{{vo.real_name}}</h4>
									<p class="weui-media-box__desc">注册时间：{{vo.time}}<br/>最后登录时间：{{vo.last_time}}</p>
								</div>
							</a>
						</template>

					</div>
				</div>

				
				<template v-if="loading == 'inits'">
					<div flex="main:center cross:center" style="width:100%; height: 400px; ">
						<div class="jushi-loader">Loading...</div>
					</div>
				</template>
	
				<template v-if="loading == 'nodata'"> 
					<div flex="main:center cross:center" style="width:100%; height: 400px; ">
						<img src="images/nodata.png" style="width: 150px;">
					</div>
				</template>
	
				<template v-if="loading == 'more'">
					<div class="weui-loadmore">
						<i class="weui-loading"></i>
						<span class="weui-loadmore__tips">加载更多</span>
					</div>
				</template>
	
				<template v-if="loading == 'more_nodata'">
					<div class="weui-loadmore weui-loadmore_line">
						<span class="weui-loadmore__tips" style="background: #eee;">没有啦</span>
					</div>
				</template>
					

			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery-weui.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/smarge.js"></script>
		<script src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			mui.plusReady(function() {

				var vm = new Vue({
					el: "#app",
					data: {
						items: [],
						apiUrl: SERVER_URL + '&c=Shop&a=myAgent',
						loading: 'inits', 
					},
					mounted: function() {
						this.inits();
					},
					methods: {
						inits: function() {
							var vm = this;
							var body = $('.main-body');
							var _p = 1;
							var _r = 20;

							Get(vm.apiUrl, {
								p: _p,
								r: _r
							}, function(data) {
								if(data.status) {
									vm.items = data.info;
									vm.p = 2;
									if(data.info.length<7){
										vm.loading = 'noshow';
									}else{
										vm.loading = 'more';
									}
								} else {
									vm.loading = 'nodata';
								}
							})

							var loading = false; //状态标记
							body.infinite(100).on("infinite", function() {

								if(loading) return;
								loading = true;

								Get(vm.apiUrl, {
									p: _p,
									r: _r
								}, function(data) {
									if(data.status) {
										_p++;
										loading = false;
										for(var i in data.info) {
											vm.items.push(data.info[i]);
										}

									} else {
										vm.loading = 'more_nodata';
										loading = false;
									}
								});

							});

						},
						openUser: function(id) {
							clicked('my_shop_agent_show.html?id=' + id, 'pop-in');
						}
					}
				})

				$('#searchCancel').on('click', function() {
					vm.inits();
				});

				//提交修改
				$("#form").on('submit', function(e) {

					e.preventDefault();
					var _k = $('#searchInput').val(); 
					Get(SERVER_URL + '&c=Shop&a=myAgent', { 
						keyword: _k
					}, function(data) {
						if(data.status) {
							vm.items = data.info;
						} else {
							mui.alert(data.info);
						}
					})

				})

			});
		</script>
	</body>

</html>